<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			body,
			html {
				width: 100%;
				height: 100%;
			}
			
			.contianer {
				width: 1500px;
				margin: 0 auto;
			}
			
			.contianer figure {
				/*排成一行，多余的换行*/
				float: left;
				width: 500px;
				height: 400px;
				/*超出去的界面隐藏*/
				overflow: hidden;
				position: relative;
			}
			/*第一个*/
			
			.contianer>figure:nth-child(1) h2 {
				position: absolute;
				top: 50px;
				left: 50px;
				color: white;
			}
			
			.contianer>figure:nth-child(1) p {
				position: absolute;
				left: 150px;
				background-color: white;
				transition: all 0.5s;
			}
			
			.contianer>figure:nth-child(1) p:nth-of-type(1) {
				top: 150px;
				transform: translateY(400px);
			}
			
			.contianer>figure:nth-child(1) p:nth-of-type(2) {
				top: 200px;
				transform: translateX(500px);
			}
			
			.contianer>figure:nth-child(1) p:nth-of-type(3) {
				top: 250px;
				transform: translateX(-500px);
			}
			
			.contianer>figure:nth-child(1):hover p:nth-of-type(1) {
				transform: translateY(0);
			}
			
			.contianer>figure:nth-child(1):hover p:nth-of-type(2) {
				transform: translateX(0);
			}
			
			.contianer>figure:nth-child(1):hover p:nth-of-type(3) {
				transform: translateX(0);
			}
			/*图片*/
			
			img,
			h2,
			p {
				transition: all 1s;
			}
			
			.contianer>figure:nth-child(1):hover img {
				transform: translateX(100px);
				/*透明度*/
				opacity: 0.5;
			}
			
			.contianer>figure:nth-child(1):hover h2 {
				/*延时效果，动画不同时开始*/
				transition-delay: 0.1s;
				transform: translateX(100px);
			}
			/*第二个*/
			
			.contianer>figure:nth-child(2) h2 {
				position: absolute;
				top: 50px;
				left: 50px;
				color: white;
			}
			
			.contianer>figure:nth-child(2) p {
				position: absolute;
				top: 150px;
				left: 50px;
				background-color: white;
				transform: translateX(-500px);
				/*使用延迟，做到先后效果*/
				transition-delay: 0.1s;
			}
			
			.contianer>figure:nth-child(2) p:nth-of-type(2) {
				top: 200px;
				transition-delay: 0.2s;
			}
			
			.contianer>figure:nth-child(2) p:nth-of-type(3) {
				top: 250px;
				transition-delay: 0.3s;
			}
			
			.contianer>figure:nth-child(2):hover p {
				transform: translateX(0);
			}
			
			.contianer>figure:nth-child(2):hover img {
				transform: translateX(-100px);
				opacity: 0.5;
			}
			/*第三个*/
			
			.contianer>figure:nth-child(3) h2 {
				position: absolute;
				top: 100px;
				left: 100px;
				color: white;
				transform: translateY(-200px);
			}
			.contianer>figure:nth-child(3) p {
				position: absolute;
				top: 150px;
				left: 120px;
				width: 350px;
				transform: translateY(400px);
			}
			.contianer>figure:nth-child(3):hover h2 {
				transform: translateY(0);
			}
			.contianer>figure:nth-child(3):hover p {
				transform: translateY(0);
			}
			.contianer>figure:nth-child(3):hover img {
				transform: translateY(-10px);
				opacity: 0.5;
			}
			/*第四个*/
			.contianer>figure:nth-child(4)>div{
				position: absolute;
				width: 600px;
				height: 300px;
				background-color: dodgerblue;
				bottom: -300px;
				transition: all 1s;
				/*修改旋转中心*/
				transform-origin: 0 0;
			}
			.contianer>figure:nth-child(4):hover>div{
				transform: rotate(-15deg);
			}
			
			.contianer>figure:nth-child(4) h2{
				position: absolute;
				top: 50px;
				left: 20px;
				color: white;
				transform: translateY(50px);
				opacity: 0;
			}
			.contianer>figure:nth-child(4):hover h2{
				transform: translateY(0);
				opacity: 1;
			}
			.contianer>figure:nth-child(4) p{
				position: absolute;
				bottom: 100px;
				right: 50px;
				background-color: white;
				transform: translateY(150px);
				z-index: 1;
				transition-delay: 0.2s;
			}
			.contianer>figure:nth-child(4):hover p{
				transform: translateY(0);
			}
			/*第五个*/
			.contianer>figure:nth-child(5) .box{
				position: absolute;
				top: 50px;
				left: 50px;
				/*hover里面有的属性值，在非hover时候也要有。不然，不会执行对应的动画*/
				/*这里的居中就要使用测量，9大点定位技术，不适合。*/
				transform:  translateY(-600px) rotate(0deg);
				height: 300px;
				width: 400px;
				border: 2px solid black;
				transition: all 1s;
				transform-origin: 20% 30%;
			}
			.contianer>figure:nth-child(5):hover .box{
				transform: translateY(0px) rotate(720deg);
			}
			.contianer>figure:nth-child(5) h2{
				position: absolute;
				top: 100px;
				left: 20px;
				color: white;
			}
			.contianer>figure:nth-child(5):hover h2{
				transform: translateX(50px);
			}
			.contianer>figure:nth-child(5) p{
				position: absolute;
				top: 300px;
				left: 70px;
				color: white;
				opacity: 0;
				width: 350px;
			}
			.contianer>figure:nth-child(5):hover p{
				transform: translateY(-150px);
				opacity: 1;
			}
			
			/*第六个*/
			.contianer>figure:nth-child(6) h2{
				position: absolute;
                top: 250px;
                left: 250px;
                
			}
			.contianer>figure:nth-child(6):hover h2{
				transform: rotate(675deg);
			}
			.contianer>figure:nth-child(6):hover img{
				transform: scale(1.2);
				opacity: 0.5;
			}
			/*第7个*/
			.contianer>figure:nth-child(7):hover img{
				transform-origin: 60% 60%;
				transform: scale(0.9);
				opacity: 0.5;
			}
			/*第9个*/
			.contianer>figure:nth-child(9):hover img{
				transform: rotate(15deg)  scale(1.2) ;
				opacity: 0.5;
			}
			/*第8个*/
			.contianer>figure:nth-child(8) h2{
				position: absolute;
				top: 150px;
				left: 250px;
				z-index: 1;
				transform-origin: 20% -20%;
				transform: rotate(-180deg) translateY(250px);
			}
			
			.contianer>figure:nth-child(8):hover h2{
				transform: rotate(0) translateY(0);
			}
			
			.contianer>figure:nth-child(8) .border01{
				position: absolute;
				top: 20px;
				left: 100px;
				width: 300px;
				height: 0px;
				border-left: 2px solid white;
				border-right: 2px solid white;
				transition: all 1s;
			}
			.contianer>figure:nth-child(8) .border02{
				position: absolute;
				top: 70px;
				left: 50px;
				width: 0px;
				height: 300px;
				border-top: 2px solid white;
				border-bottom: 2px solid white;
				transition: all 1s;
			}
			.contianer>figure:nth-child(8):hover .border01{
				height: 400px;
			}
			.contianer>figure:nth-child(8):hover .border02{
				width: 400px;
			}
			
			
			
		</style>
	</head>

	<body>

		<div class="contianer">
			<!--常用于图文混排-->
			<!--figcaption一般放文本-->
			<figure>
				<img src="imgTS/1.png" />
				<figcaption>
					<h2>Billboard三首排行第一</h2>
					<p>Shake It Off</p>
					<p>Black Space</p>
					<p>Bad Blood</p>
				</figcaption>
			</figure>

			<figure>
				<img src="imgTS/2.png" />
				<figcaption>
					<h2>Taylor Swift</h2>
					<p>Birthday:1989.12.13</p>
					<p>Height:180cm</p>
					<p>Weight:56kg</p>
				</figcaption>
			</figure>

			<figure>
				<img src="imgTS/3.png" />
				<figcaption>
					<h2>Back To December</h2>
					<p>I'm so glad you made time to see me. How's life, tell me how's your family? I haven't seen them in a while. You've been good, busier then ever. We small talk, work and the weather Your guard is up and I know why..</p>
				</figcaption>
			</figure>

			<figure>
				<img src="imgTS/4.png" />
				<figcaption>
					<h2>1989</h2>
					<p>Taylor Swift《1989》</p>
				</figcaption>
				<!--右下角的滑动三角-->
				<div >
				</div>
			</figure>
			<figure>
				<img src="imgTS/5.png" />
				<figcaption>
					<h2>Taylor Swift-《22》</h2>
					<p>I don't know about you, but I’m feeling 22, Everything will be alright if you keep me next to you, You don't know about me, but I bet you want to, Everything will be alright if we just keep dancing like we're... 22 22</p>
				</figcaption>
				<div class="box" >
				</div>
			</figure>

			<figure>
				<img src="imgTS/6.png" />
				<figcaption>
					<h2>Out of the Woods</h2>
				</figcaption>
			</figure>

			<figure>
				<img src="imgTS/7.png" />
				<figcaption>
					<h2>Billboard三首排行第一</h2>
					<p>Shake It Off</p>
					<p>Black Space</p>
					<p>Bad Blood</p>
				</figcaption>
			</figure>
			<figure>
				<img src="imgTS/8.png" />
				<figcaption>
					<h2>Taylor Swift</h2>
					<div class="border01">
					</div>
					<div class="border02">
					</div>
				</figcaption>
			</figure>
			<figure>
				<img src="imgTS/9.png" />
				<figcaption>
					<h2>Billboard三首排行第一</h2>
					<p>Shake It Off</p>
					<p>Black Space</p>
					<p>Bad Blood</p>
				</figcaption>
			</figure>

		</div>

	</body>

</html>